<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Unify Admin后台框架统一开发规范，提供前后端分离/不分离开发物料与实例，覆盖API文档、数据库字典、原型图等全链路资源，助力高效构建管理系统">
    <meta name="keywords" content="admin后台框架,前后端分离开发规范,前后端不分离开发实例,后台管理系统开发物料,Unify Admin统一规范">
    <link rel="shortcut icon" href="./static/logo.png">
    <title>UnifyAdmin统一开发规范</title>
    <!-- 引入Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入jQuery CDN -->
    <script>
        var _hmt = _hmt || [];
        (function () {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?8ae525cfeed74b92ac3c2fb01a7ab13e";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>

    <style>
        /* 仅保留必要自定义样式（Tailwind未覆盖部分） */
        .hero-image img {
            margin-top: -10vh;
        }

        .down-tip {
            animation: jumpUpDown 1.5s infinite;
        }

        @keyframes jumpUpDown {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-10px);
            }
        }

        /* 新增彩色风格变量（覆盖Tailwind默认灰色） */

        /* 新增商务深色变量 */
        :root {
            --primary: #2c3e50;
            /* 主色-深蓝（HisiPHP类似商务蓝） */
            --primary-light: #ecf0f1;
            /* 主色-浅灰蓝（背景色） */
            --accent: #3498db;
            /* 强调色-亮蓝（按钮/链接） */
            --text-dark: #2d3436;
            /* 文字-深灰（高可读性） */
            --text-light: #7f8c8d;
            /* 文字-浅灰（辅助信息） */
        }


        /* 更新主题色为#4A6BAF并优化配色方案 */
        :root {
            --primary: #4A6BAF;
            /* 新主题色 */
            --primary-light: #f8faff;
            /* 调整为更淡的浅蓝背景（原#f0f4ff） */
            --accent: #6B8CE8;
            /* 新强调色 */
            --text-dark: #2B344B;
            /* 深蓝替代深灰 */
            --text-light: #6C757D;
            /* header */
            --primary-header: #004578;
        }
    </style>

    <!-- 导航栏颜色更新 -->
    <nav class="fixed top-0 w-full bg-[var(--primary-header)] shadow-lg z-10">
        <div class="container mx-auto px-4">
            <div class="flex justify-between items-center py-4">
                <!-- Logo + 版本号 + 仓库入口 整体容器 -->
                <div class="flex items-center gap-2">
                    <a href="#home" class="flex items-center gap-2 text-2xl font-bold text-white">
                        <img src="./static/logo.png" alt="Unify Admin" class="w-8 h-8">
                        <span>Unify Admin</span>
                    </a>
                    <!-- 版本号与仓库入口（新增items-end实现底线对齐，删除GitHub入口） -->
                    <div class="flex items-end space-x-4"> <!-- 关键修改：添加items-end -->
                        <span class="text-white/90 text-sm" id="version_text">v0.0</span>

                    </div>
                </div>
                <!-- 原导航链接 -->
                <div class="hidden md:flex space-x-8">
                    <a href="#features" class="text-white/90 hover:text-[var(--accent)] transition-colors">核心特性</a>
                    <a href="#materials" class="text-white/90 hover:text-[var(--accent)] transition-colors">开发物料</a>
                    <a href="#projects" class="text-white/90 hover:text-[var(--accent)] transition-colors">实例项目</a>
                    <a href="#faq" class="text-white/90 hover:text-[var(--accent)] transition-colors">常见问题</a>
                    <a href="#changelog" class="text-white/90 hover:text-[var(--accent)] transition-colors">版本记录</a>
                    <!-- <div class="relative group">
                        <button class="text-white/90 hover:text-[var(--accent)] transition-colors">其他项目 ▼</button>
                        关键修改：将mt-2（顶部边距）改为mt-0，消除按钮与下拉框的间隙 -->
                    <!-- <div
                            class="hidden group-hover:block absolute bg-white shadow-lg rounded mt-0 p-2 min-w-[200px]">
                            <a href="/noco-admin"
                                class="block px-4 py-2 text-[var(--text-dark)] hover:bg-gray-100">NocoAdmin</a>
                            <a href="/template"
                                class="block px-4 py-2 text-[var(--text-dark)] hover:bg-gray-100">后台集成模板</a>
                        </div> -->
                    <!-- </div> -->
                </div>
            </div>
        </div>
    </nav>

    <!-- 移除英雄区中原有的版本号与仓库入口 -->
    <section id="home" class="min-h-screen flex items-center pt-20 bg-[var(--primary-light)]">
        <div class="container mx-auto px-4">
            <div class="grid md:grid-cols-2 gap-8 items-center">
                <div class="md:order-1">
                    <h1 class="text-4xl md:text-5xl font-bold text-[var(--text-dark)] mb-4">Unify Admin 统一开发规范</h1>
                    <p class="text-xl text-[var(--text-light)] mb-8">连接世界，规范终有限。提供全链路开发物料与实例，助力高效构建管理系统。</p>
                    <div class="space-x-4">
                        <button
                            class="px-6 py-2 bg-[var(--accent)] text-white rounded-lg hover:bg-[var(--accent)/90] transition-colors"
                            onclick="openDocument()">立即查看文档</button>
                        <button
                            class="px-6 py-2 bg-white border border-[var(--accent)] text-[var(--accent)] rounded-lg hover:bg-[var(--accent)/10] transition-colors"
                            onclick="openUrl('https://gitee.com/UnifyAdmin')">查看仓库</button>
                    </div>
                </div>
                <div class="md:order-2">
                    <img src="./static/first/right4.png" alt="右侧大图" class="w-full rounded-lg">
                </div>
            </div>
        </div>
        <div id="scrollDown" class="absolute bottom-8 left-1/2 transform -translate-x-1/2 down-tip cursor-pointer"
            onclick="scrollDown()">
            <span class="text-3xl text-[var(--text-light)]">↓</span>
        </div>
    </section>

    <!-- 核心特性（添加图片） -->
    <!-- 核心特性（白色背景+卡片布局） -->
    <!-- 核心特性（白色背景+卡片布局） -->
    <section id="features" class="py-20 bg-white">
        <div class="container mx-auto px-4">
            <h2 class="text-3xl font-bold text-[var(--text-dark)] text-center mb-12">核心优势</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                <!-- 规范开发卡片 -->
                <div class="p-6 bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow">
                    <!-- 图片尺寸调整为w-24 h-24（96px） -->
                    <img src="./static/second/1.png" alt="规范开发" class="w-24 h-24 mx-auto mb-4">
                    <h3 class="text-xl font-semibold text-[var(--text-dark)] text-center mb-3">规范开发</h3>
                    <p class="text-sm text-[var(--text-light)] text-center">统一规范，独步未来。源码开放，注释清晰。</p>
                </div>
                <div class="p-6 bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow">
                    <img src="./static/second/2.png" alt="语言兼容" class="w-24 h-24 mx-auto mb-4">
                    <h3 class="text-xl font-semibold text-[var(--text-dark)] text-center mb-3">语言兼容</h3>
                    <p class="text-sm text-[var(--text-light)] text-center">消除边界，语言通用。磨平差异，统一实例。</p>
                </div>
                <div class="p-6 bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow">
                    <img src="./static/second/31.png" alt="简便高效" class="w-24 h-24 mx-auto mb-4">
                    <h3 class="text-xl font-semibold text-[var(--text-dark)] text-center mb-3">简便高效</h3>
                    <p class="text-sm text-[var(--text-light)] text-center">规范通用，从一开始。快速构建，完成项目。</p>
                </div>
                <div class="p-6 bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow">
                    <img src="./static/second/41.png" alt="灵活开发" class="w-24 h-24 mx-auto mb-4">
                    <h3 class="text-xl font-semibold text-[var(--text-dark)] text-center mb-3">灵活开发</h3>
                    <p class="text-sm text-[var(--text-light)] text-center">多版任用，自由组合。开放规范，创新无限。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 开发物料（调整为浅绿背景） -->
    <!-- 开发物料（主色浅蓝背景） -->
    <!-- 开发物料（浅灰蓝背景+卡片布局） -->
    <!-- 开发物料（浅灰蓝背景+卡片布局） -->
    <!-- 开发物料（浅灰蓝背景+卡片布局） -->
    <section id="materials" class="py-20 bg-[var(--primary-light)]">
        <div class="container mx-auto px-4">
            <h2 class="text-3xl font-bold text-[var(--text-dark)] text-center mb-12">开发物料中心</h2>
            <!-- 新增副标题 -->
            <p class="text-center text-[var(--text-light)] text-sm mt-[-4px] mb-8">官网为最新版本，历史版本请点击 <a target="_blank"
                    style="font-weight: bold;" href="https://gitee.com/UnifyAdmin/unify-admin-doc">仓库地址</a> 自行下载</p>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <!-- API文档卡片 -->
                <div
                    class="p-8 bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow text-center flex flex-col justify-between">
                    <!-- 关键修改：添加flex布局 -->
                    <div>
                        <h3 class="text-xl font-semibold text-[var(--text-dark)] mb-2">API文档</h3>
                        <p class="text-sm text-[var(--text-light)]">完整接口定义与调用示例，覆盖全业务场景</p>
                    </div>
                    <!-- 底部按钮组 -->
                    <div class="flex justify-center gap-3 mt-4">
                        <button onclick="openDoc('api_preview')"
                            class="px-4 py-2 bg-[var(--accent)] text-white rounded-lg hover:opacity-80 transition-colors">在线查看</button>
                        <a onclick="openDoc('api_json')" href="#"
                            class="px-4 py-2 bg-white border hover:opacity-90 border-[var(--accent)] text-[var(--accent)] rounded-lg hover:bg-[var(--accent)/10] transition-colors">下载文档</a>
                    </div>
                </div>

                <!-- 数据库字典卡片 -->
                <div
                    class="p-8 bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow text-center flex flex-col justify-between">
                    <div>
                        <h3 class="text-xl font-semibold text-[var(--text-dark)] mb-2">数据库字典</h3>
                        <p class="text-sm text-[var(--text-light)]">包含全表结构定义、字段说明、索引规则及表间关联关系，支持直接导出SQL脚本</p>
                    </div>
                    <!-- 底部按钮组 -->
                    <div class="flex justify-center gap-3 mt-4">
                        <button onclick="openDoc('db_preview')"
                            class="px-4 py-2 bg-[var(--accent)] text-white rounded-lg hover:opacity-80 transition-colors">在线查看</button>
                        <a href="#" onclick="openDoc('db_sql')"
                            class="px-4 py-2 bg-white border hover:opacity-90 border-[var(--accent)] text-[var(--accent)] rounded-lg hover:bg-[var(--accent)/10] transition-colors">下载SQL</a>
                    </div>
                </div>

                <!-- 原型图卡片 -->
                <div
                    class="p-8 bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow text-center flex flex-col justify-between">
                    <div>
                        <h3 class="text-xl font-semibold text-[var(--text-dark)] mb-2">原型图</h3>
                        <p class="text-sm text-[var(--text-light)]">涵盖后台管理系统核心页面交互设计，包含表单/列表/弹窗等组件规范及用户操作流程演示</p>
                    </div>
                    <!-- 底部按钮组 -->
                    <div class="flex justify-center gap-3 mt-4">
                        <button onclick="openDoc('prototype_preview')"
                            class="px-4 py-2 bg-[var(--accent)] text-white rounded-lg hover:opacity-80 transition-colors">在线查看</button>
                        <a href="#" onclick="openDoc('prototype_rp')"
                            class="px-4 py-2 bg-white hover:opacity-90 border border-[var(--accent)] text-[var(--accent)] rounded-lg hover:bg-[var(--accent)/10] transition-colors">下载原型</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 实例项目（白色背景+卡片布局） -->
    <section id="projects" class="py-20 bg-white">
        <div class="container mx-auto px-4">
            <h2 class="text-3xl font-bold text-[var(--text-dark)] text-center mb-12">实例项目</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <!-- 新增前端项目卡片 -->
                <a target="_blank" href="https://gitee.com/UnifyAdmin/unify-admin-amis"
                    class="p-6 bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow">
                    <div class="flex items-center gap-2 mb-2">

                        <span class="px-2 py-1 bg-blue-100 text-blue-800 text-sm rounded-full">前端</span>
                        <h4 class="text-xl font-semibold text-[var(--text-dark)] ">Unify Admin Amis</h4>
                    </div>
                    <p class="text-sm text-[var(--text-light)]">基于Amis SDK开发的纯前端基础功能应用框架</p>
                </a>
                <a target="_blank" href="https://gitee.com/UnifyAdmin/unify-admin-uni"
                    class="p-6 bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow">
                    <div class="flex items-center gap-2 mb-2">
                        <span class="px-2 py-1 bg-blue-100 text-blue-800 text-sm rounded-full">前端</span>
                        <h4 class="text-xl font-semibold text-[var(--text-dark)] ">Unify Admin Uni</h4>

                    </div>
                    <p class="text-sm text-[var(--text-light)]">基于UniApp开发的纯前端基础框架</p>
                </a>

                <!-- 原后端项目卡片 -->
                <a target="_blank" href="https://gitee.com/UnifyAdmin/unify-admin-think"
                    class="p-6 bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow">
                    <div class="flex items-center gap-2 mb-2">
                        <span class="px-2 py-1 bg-green-100 text-green-800 text-sm rounded-full">后端</span>
                        <h4 class="text-xl font-semibold text-[var(--text-dark)] ">Unify Admin Think</h4>

                    </div>
                    <p class="text-sm text-[var(--text-light)]">基于ThinkPHP8开发的纯后端基础框架</p>
                </a>
                <!-- 其他实例卡片样式相同 -->
            </div>
        </div>
    </section>

    <!-- 常见问题（原白色背景改为浅蓝背景） -->
    <section id="faq" class="py-20 bg-[var(--primary-light)]">
        <div class="container mx-auto px-4">
            <h2 class="text-3xl font-bold text-[var(--text-dark)] text-center mb-12">常见问题</h2>
            <div class="grid md:grid-cols-2 gap-6 max-w-4xl mx-auto">
                <div class="p-6 bg-white rounded-lg shadow-sm hover:shadow-md transition-colors">
                    <h3 class="text-lg font-semibold mb-2">为何制作UnifyAdmin？</h3>
                    <p class="text-sm text-[var(--text-light)]">因定位不同：仅设基础框架功能与规范，目标是实现前端后端技术的多元组合。</p>
                </div>
                <div class="p-6 bg-white rounded-lg shadow-sm hover:shadow-md transition-colors">
                    <h3 class="text-lg font-semibold mb-2">没有我要的实例为何称广度发展？</h3>
                    <p class="text-sm text-[var(--text-light)]">定位为统一规范（原型图 / API / 数据库字典），鼓励百家开发实例，实现技术自由组合。</p>
                </div>
                <div class="p-6 bg-white rounded-lg shadow-sm hover:shadow-md transition-colors">
                    <h3 class="text-lg font-semibold mb-2">基础功能本就不多，价值何在？</h3>
                    <p class="text-sm text-[var(--text-light)]">基础功能是开发基石，摒弃围墙与高成本，让开发者专注业务创新而非重复实现基础框架。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 版本记录（原浅蓝背景改为白色背景） -->
    <section id="changelog" class="py-20 bg-white">
        <div class="container mx-auto px-4">
            <h2 class="text-3xl font-bold text-[var(--text-dark)] text-center mb-12">版本记录</h2>
            <div class="max-w-4xl mx-auto">
                <div class="border-l-2 border-[var(--accent)] pl-8 space-y-12 pb-16">
                    <div class="relative">
                        <div class="absolute w-4 h-4 bg-[var(--accent)] rounded-full -left-[11px] top-1"></div>
                        <h3 class="text-xl font-semibold pl-4">2024.07 - v1.1.0</h3>
                        <p class="text-[var(--text-light)] mt-2"></p>
                    </div>
                    调整接口数据结构，修复已知问题。
                </div>
                <div class="border-l-2 border-[var(--accent)] pl-8 space-y-12">
                    <div class="relative">
                        <div class="absolute w-4 h-4 bg-[var(--accent)] rounded-full -left-[11px] top-1"></div>
                        <h3 class="text-xl font-semibold pl-4">2024.01 - v1.0</h3>
                        <p class="text-[var(--text-light)] mt-2"></p>
                    </div>
                    接口管理、菜单管理、权限管理、系统配置、资源管理、管理员管理、用户日志
                </div>
            </div>
        </div>
    </section>

    <!-- 尾部信息（深蓝背景） -->
    <!-- 尾部信息（深蓝背景） -->
    <footer class="pt-12 pb-3 text-white" style="background-color: #333;">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <h4 class="text-xl font-semibold mb-4">商户合作</h4>
                    <p class="text-sm">邮箱：1103712527@qq.com</p>
                    <p class="text-sm">微信号：qingfeng8194</p>
                </div>
                <div>
                    <h4 class="text-xl font-semibold mb-4">官方交流群</h4>
                    <p class="text-sm">微信群（加V）：qingfeng8194</p>
                </div>
                <div>
                    <h4 class="text-xl font-semibold mb-4">开发者福利</h4>
                    <p class="text-sm">正在途中...</p>
                </div>
                <div>
                    <h4 class="text-xl font-semibold mb-4">其他项目</h4>
                    <p class="text-sm"><a target="_blank" href="https://gitee.com/edwardcho/amis-admin">AmisAdmin</a>
                    </p>
                    <p class="text-sm"><a target="_blank" href="https://hosp.unifyadmin.cn">Hosp</a></p>
                </div>
            </div>
            <p class="text-center mt-8 text-sm">© 2025 Unify Admin. All rights reserved. <a
                    href="https://beian.miit.gov.cn/" target="_blank">浙ICP备2024100632号-4</a></p>
        </div>
    </footer>
    <script src="./static/jquery-3.7.1.min.js"></script>
    <script>
        var version = 'v1.1.0';
        // jQuery交互逻辑

        $('#version_text').text(version);

        $('a[href^="#"]').click(function (e) {
            e.preventDefault();
            $('html, body').animate({
                scrollTop: $($(this).attr('href')).offset().top - 80
            }, 500);
        });

        $('#scrollDown').click(function () {
            $('html, body').animate({
                scrollTop: $('#features').offset().top - 80  // 滚动到#features模块顶部（减去导航栏高度）
            }, 500);
        });


        // 按钮点击事件
        function openDocument() {
            location.href = "#materials";
        }
        function addGroup() {
            open("https://gitee.com/UnifyAdmin");
        }

        function openUrl(url) {
            open(url);
        }

        function openDoc(key) {
            switch (key) {
                case 'api_preview':
                    open('https://unify-admin.apifox.cn');
                    break;
                case 'api_json':
                    open('./doc/api/' + version + '.openapi.json')
                    break;
                case 'db_preview':
                    open('https://view.officeapps.live.com/op/view.aspx?src=' + encodeURIComponent(location.href + 'doc/db/' + version + '.docx'));
                    break;
                case 'db_sql':
                    open('./doc/db/' + version + '.sql');
                    break;
                case 'prototype_preview':
                    open('https://codesign.qq.com/app/prototype/554029899175676');
                    break;
                case 'prototype_rp':
                    open('./doc/prototype/' + version + '.rp');
                    brea
            }
        }
    </script>
    </body>

</html>